<template>
  <div class="content">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">收件箱</el-menu-item>

      <el-menu-item index="2">发件箱</el-menu-item>
    </el-menu>
    <div class="line" v-if="Carindex==1">
      <div class="select">
        <p class="name">关键字</p>
        <el-input style="width:300px;margin-right: 20px;" v-model="inboxName"></el-input>
        <el-button type="primary" @click.native="inboxseach">搜索</el-button>
      </div>
      <div class="listwarp">
        <el-table
          :data="Inboxlist"
          :cell-style="$rowstyle"
          :header-cell-style="$headerstyle"
          border
          style="width: 100%"
        >
          <el-table-column label="序号" align="center" type="index" width="55"></el-table-column>
          <el-table-column prop="name" label="报告名称" align="center"></el-table-column>
          <el-table-column prop="size" label="文件大小" align="center"></el-table-column>
          <el-table-column prop="get_resave_people.name" label="上传人" align="center"></el-table-column>
          <el-table-column prop="created_at" label="上传时间" align="center"></el-table-column>
          <el-table-column prop="remark" label="说明" align="center"></el-table-column>

          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button @click.native="down(scope.row)" type="text" size="small">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="setinboxPAGE"
            :current-page.sync="inboxPage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="inboxAlltotal"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="line" v-show="Carindex==2">
      <div class="select he">
        <div class="left" style="display: flex; align-items: center;margin-right:30px;">
          <p class="name">关键字</p>
          <el-input style="width:300px;margin-right: 20px;" v-model="outboxName"></el-input>
          <el-button type="primary" @click.native="outboxseach">搜索</el-button>
        </div>
      </div>
      <div class="listwarp">
        <div class="right">
          <el-button type="primary" @click.native="setstatus">新建</el-button>
          <el-button type="danger">删除</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="outboxlist"
          tooltip-effect="dark"
          :cell-style="$rowstyle"
          :header-cell-style="$headerstyle"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column label type="selection" align="center" width="50"></el-table-column>
          <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
          <el-table-column label="报告名称" align="center" prop="name"></el-table-column>

          <el-table-column prop="size" align="center" label="文件大小"></el-table-column>
          <el-table-column prop="get_admin_info.name" label="接收人" align="center"></el-table-column>
          <el-table-column prop="remark" align="center" label="说明"></el-table-column>
          <el-table-column prop="created_at" align="center" label="上传时间"></el-table-column>
          <el-table-column label="操作" align="center" width="60">
            <template slot-scope="scope">
              <el-button type="text" @click="down(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="setOutboxpage"
            :current-page.sync="outboxPage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="outboxAlltotal"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- addstatus -->
    <div class="prop" v-show="addstatus">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="height:450px;width:700px;">
        <div class="propheader">
          新建报告
          <el-button type="text" class="close1" style="margin-top: 10px" @click="setstatus">关闭</el-button>
        </div>
        <div class="warpcontent">
          <div class="warpleft">
            <div class="warpitem">
              <div class="name">报告名称</div>
              <el-input v-model="name" style="max-width:200px;"></el-input>
            </div>

            <div class="rightwarp">
              <div class="rightheader">发送至：</div>
              <el-tree :data="doorlist" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
          </div>
          <div class="warpright">
            <div class="warpitem">
              <div class="name">文件</div>
              <el-upload
                class="upload-demo"
                accept=".xls, .xlsx, .pdf, .doc, .docx"
                ref="upload"
                :on-remove="remove"
                :limit="2"
                :on-success="success"
                :multiple="true"
                :action="$src+'/api/upload'"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </div>
            <div class="warpitem">
              <div class="name">说明</div>
              <el-input type="textarea" v-model="remark" placeholder="请输入内容" :rows="2"></el-input>
            </div>
            <div class="rightlist">
              <el-table
                :data="okadminlist"
                :header-cell-style="$headerstyle"
                :row-style="{height:'0px'}"
                :cell-style="{padding:'4px 0'}"
                border
                style="width: 100%"
              >
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="name" align="center" label="姓名"></el-table-column>

                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button @click="deladmine(scope)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="btom">
          <el-button type="primary" @click.native="addsave">提交</el-button>
          <el-button type="primary" @click.native="setstatus">取消</el-button>
        </div>
      </div>
    </div>
    <div class="prop" style="z-index:999" v-show="userStatus">
      <div style="height:170px;width:100%"></div>
      <div class="warpprop" style="height:400px;width:500px;">
        <div class="propheader">
          选择接收人
          <el-button
            type="text"
            class="close1"
            style="margin-top: 10px"
            @click.native="setuserStatus"
          >关闭</el-button>
        </div>
        <div class="userlists">
          <el-table
            ref="multipleTable"
            border
            :data="adminlist"
            :row-style="{height:'0px'}"
            :cell-style="{padding:'4px 0'}"
            :header-cell-style="$headerstyle"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column type="index" align="center" label="序号" width="55"></el-table-column>
            <el-table-column prop="name" align="center" label="姓名"></el-table-column>
            <el-table-column align="center" label="选择">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click.native="userclick(scope)"
                >{{scope.row.status?'取消':'选择'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="btom" style="width:50px;">
          <el-button type="primary" @click.native="setuserStatus">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getReportCenterlist,
  getSENDdoor,
  addreport,
  getpath
} from "../../api/Salesman.js";
import { SETDATE } from "../../api/System.js";

export const downloadFile = url => {
  const iframe = document.createElement("iframe");
  iframe.style.display = "none"; // 防止影响页面
  iframe.style.height = 0; // 防止影响页面
  iframe.src = url;
  document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
  // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
  setTimeout(() => {
    iframe.remove();
  }, 5 * 60 * 1000);
};
export default {
  data() {
    return {
      addstatus: false,
      activeIndex: "1",
      Carindex: 1,
      list: [
     
      ],
      doorlist: [],
      //人员列表
      adminlist: [
        // {id:3}
      ],
      //选中列表
      okadminlist: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      fileList: [],
      // 、、
      userStatus: false,
      //收件箱列表
      Inboxlist: [],
      inboxPage: 1,
      inboxAlltotal: 0,
      inboxName: "",
      //发件箱
      outboxlist: [],
      outboxPage: 1,
      outboxAlltotal: 0,
      outboxName: "",
      //新建报告
      name: "",
      remark: ""
    };
  },
  created() {
    this.getlist({
      type: 1,
      per: 10,
      name: this.inboxName,
      page: this.inboxPage
    });
    this.getlist({
      type: 2,
      per: 10,
      name: this.outboxName,
      page: this.outboxPage
    });
    this.getdoor();
  },
  methods: {
    //保存
    addsave() {
      if (!this.name) {
        this.$message({
          message: "报告名称不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.remark) {
        this.$message({
          message: "说明不能为空",
          type: "warning"
        });
        return;
      }
      if (this.fileList.length < 1) {
        this.$message({
          message: "请选择文件",
          type: "warning"
        });
        return;
      } else {
        var file = [];

        this.fileList.forEach(element => {
          file.push({
            file_path: element.response.data.path,
            size: element.response.data.size
          });
        });
      }
      if (this.okadminlist.length < 1) {
        this.$message({
          message: "请选择收件人",
          type: "warning"
        });
        return;
      } else {
        var resave_people_id = [];
        this.okadminlist.forEach(element => {
          resave_people_id.push(element.id);
        });
      }
      var data = {};
      data.name = this.name;
      data.file = file;
      data.resave_people_id = resave_people_id;
      data.remark = this.remark;
      addreport(data).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "发送成功",
            type: "success"
          });
          this.setstatus();
          this.$refs.upload.clearFiles();
          this.getlist({
            type: 2,
            per: 10,
            name: this.outboxName,
            page: this.outboxPage
          });
        }
      });
    },
    //下载文件
    down(row) {
      getpath({ id: row.id }).then(res => {
        if (res.code == 200) {
          res.data =
            res.data.substring(res.data.length - 1) == ","
              ? res.data.substring(0, res.data.length - 1)
              : res.data;

          var arr = res.data.split(",");
          // // return
          for (var i = 0; i < arr.length; i++) {
            //循环遍历调用downloadFile方法
            const url = this.$src + "/" + arr[i];
            downloadFile(url);
          }

          // arr.forEach(element => {
          //   // window.location.href = this.$src+"/"+element
          //    this.downloadFile(this.$src+"/"+element);
          // });
        }
      });
    },

    //选择发送人
    setuserStatus() {
      this.userStatus = !this.userStatus;
    },
    //获取部门列表
    getdoor() {
      getSENDdoor().then(res => {
        if (res.code == 200) {
          this.doorlist = res.data;
        }
      });
    },
    //收件箱点击收缩
    inboxseach() {
      this.inboxPage = 1;
      this.inboxAlltotal = 0;
      this.getlist({
        per: 10,
        page: this.inboxPage,
        name: this.inboxName,
        type: 1
      });
    },
    //收件箱点击收缩
    outboxseach() {
      this.outboxPage = 1;
      this.outboxAlltotal = 0;
      this.getlist({
        per: 10,
        page: this.outboxPage,
        name: this.outboxName,
        type: 2
      });
    },
    //设置收件箱页数
    setinboxPAGE(e) {
      this.inboxPage = e;
      this.getlist({
        per: 10,
        page: this.inboxPage,
        name: this.inboxName,
        type: 1
      });
    },
    //设置发件箱页数
    setOutboxpage(e) {
      this.outboxPage = e;
      this.getlist({
        per: 10,
        page: this.outboxPage,
        name: this.outboxName,
        type: 2
      });
    },
    //获取查询列表
    getlist(data) {
      getReportCenterlist(data).then(res => {
        if (res.code == 200) {
          if (data.type == 1) {
            this.Inboxlist = res.data.data;
            this.inboxPage = res.data.current_page;
            this.inboxAlltotal = res.data.total;
            this.Inboxlist.forEach(element => {
              element.created_at = SETDATE(element.created_at);
            });
          } else {
            this.outboxlist = res.data.data;
            this.outboxPage = res.data.current_page;
            this.outboxAlltotal = res.data.total;
            this.outboxlist.forEach(element => {
              element.created_at = SETDATE(element.created_at);
            });
          }
        }
      });
    },
    setstatus() {
      if (this.addstatus) {
        this.name = "";
        this.remark = "";
        this.adminlist = [];
        this.okadminlist = [];
      }
      this.addstatus = !this.addstatus;
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    handleSizeChange1() {},
    handleSelectionChange(e) {
      console.log(e);
    },
    handleSelect(e) {
      this.Carindex = e;
    },
    userclick(e) {
      var row = e.row;
      if (row.status) {
        row.status = false;
        this.adminlist[e.$index].status = false;
        var id = row.id;
        var item = this.okadminlist.indexOf(row);
        this.okadminlist.splice(item, 1);
      } else {
        row.status = true;
        this.adminlist[e.$index].status = true;
        this.okadminlist.push(row);
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.status) {
        return "warning-row";
      } else {
        return "";
      }
    },
    //文件上传
    success(res, file, list) {
      this.fileList = list;
    },
    //移除文件
    remove(file, list) {
      this.fileList = list;
    },
    //删除已选择的人
    deladmine(e) {
      this.okadminlist.splice(e.$index, 1);
    },
    handleNodeClick(data) {
      if (data.childrens.length > 0) {
        this.setuserStatus();
        this.adminlist = data.childrens;
        for (let index = 0; index < this.adminlist.length; index++) {
          this.adminlist[index].status = false;
          for (let i = 0; i < this.okadminlist.length; i++) {
            if (this.adminlist[index].id == this.okadminlist[i].id) {
              this.adminlist[index].status = true;
            }
          }
        }
      }
    }
  }
};
</script>
<style lang="scss" scope>
.content /deep/ .el-table .warning-row {
  background: rgb(245, 170, 73);
}

.line {
  width: 98%;
  margin: 0 auto;
  .select {
    display: flex;
    align-items: center;
    .name {
      margin-right: 20px;
    }
  }

  .listwarp {
    width: 97%;
    margin: 0 auto;
    margin-top: 20px;
    .right {
      float: right;
      margin-bottom: 15px;
    }
  }
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: 0px;
  color: #169bd5;
}
.warpprop {
  width: 700px;
  height: 500px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .warpcontent {
    width: 98%;
    margin: 0 auto;
    display: flex;
    height: 330px;
    .warpleft {
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 100%;
      .warpitem {
        display: flex;
        align-items: center;
        margin-top: 20px;
        .name {
          width: 100px;
          margin-left: 10px;
        }
      }
      .rightwarp {
        overflow-y: auto;
        flex: 1;
        //  background: red;
        // width: 80%;
        margin-left: 20px;
        // margin: 0 auto;
        .rightheader {
          margin-top: 15px;
          margin-bottom: 20px;
        }
      }
      .rightwarp::-webkit-scrollbar {
        /*滚动条整体样式*/

        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;
      }

      .rightwarp::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/

        border-radius: 10px;

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        background: #535353;
      }

      .rightwarp::-webkit-scrollbar-track {
        /*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        border-radius: 10px;

        background: #ededed;
      }
    }
    .warpright {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .warpitem {
        display: flex;
        align-items: center;
        margin-top: 20px;
        .name {
          width: 100px;
          margin-left: 10px;
        }
      }
      .rightlist {
        flex: 1;
        width: 93%;
        margin: 0 auto;
        // background: red;
        overflow-y: auto;
        margin-top: 15px;
      }
      .rightlist::-webkit-scrollbar {
        /*滚动条整体样式*/

        width: 3px; /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;
      }

      .rightlist::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/

        border-radius: 10px;

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        background: #535353;
      }

      .rightlist::-webkit-scrollbar-track {
        /*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        border-radius: 10px;

        background: #ededed;
      }
      .rightwarp {
        width: 80%;
        margin: 0 auto;
        .rightheader {
          margin-top: 30px;
          margin-bottom: 20px;
        }
      }
    }
  }
  .btom {
    width: 150px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
  }
}
.he {
  justify-content: space-between;
}
.userlists {
  width: 90%;
  height: 270px;
  // background: red;
  margin: 0 auto;
  margin-top: 20px;
  overflow-y: auto;
}
.userlists::-webkit-scrollbar {
  /*滚动条整体样式*/

  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/

  height: 1px;
}

.userlists::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  background: #535353;
}

.userlists::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  border-radius: 10px;

  background: #ededed;
}
</style>